<template>
    <div class="bg">

        <div class="content">

            <el-card class="box-card">

                <p
                    style="text-align: center;color: white;font-size: large;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                    oppor-manage-app
                </p>
                <br>
                <el-form :model="authForm" :label-position="left" label-width="60px" :inline="false" :size="normal">
                    <el-form-item>
                        <template #label>
                            <span style="color: white;">uid</span>
                        </template>
                        <el-input v-model="authForm.uid"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <template #label>
                            <span style="color: white;">pwd</span>
                        </template>
                        <el-input type="password" autocomplete="off" v-model="authForm.pwd"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">Login</el-button>
                        <el-button>Cancel</el-button>
                    </el-form-item>
                </el-form>

            </el-card>




        </div>
        <div style="bottom: 0px;position: fixed;width: 100%;height: 36px;">
            <p style="text-align: center;color: white;">
                CopyRight by lzh @2024
            </p>
        </div>
    </div>
</template>
    
<script>
import moment from 'moment';
import { ElMessage } from 'element-plus'
import { postLogin } from '@/api/login/login.js'
// const myMockData = require("./mock/menu.json");
// import staMenu from '../../mock/menu.json'
// function hidestatus() {
//     window.status = "隐藏的链接";
//     return true;
// }

// import {loginReq, getCaptcha} from "@/api/backend-req/login";

export default {
    // name: "Auth",

    data() {
        return {
            left: 'left',
            normal: 'default',
            authForm: {
                uid: '',
                pwd: ''

            },
            captcha: '',
            captchaUUID: '',
            allowClear: true,
            formLayout: 'horizontal',
            // form: this.$form.createForm(this, {name: 'normal_login'})
        };
    },
    created() {
        console.log(this.$route);
        let routeNameTarget = this.$route.name;
        let routeQueryTarget = this.$route.query;

        //在没点退出按钮就访问登录页/根目录时，直接跳回首页defaultHome，因为没点退出按钮，session还在
        // let loginInfo = JSON.parse(sessionStorage.getItem('loginInfo'));
        // //在home页面访问login，仍调回home页
        // if (routeNameTarget === 'Auth' && loginInfo !== null && loginInfo.token !== undefined) {
        //     console.warn("已登录，自动返回首页")
        //     this.$router.push({path: 'defaultHome'})
        // }

        // if (routeQueryTarget !== {} && routeQueryTarget.state === 'STATE' && routeNameTarget === 'Auth') {
        //     console.warn(routeQueryTarget);
        //     this.$reqGlobal.get('/lte/oauthLogin', {params: routeQueryTarget}).then(res => {
        //         if (res.data.code === 0) {

        //             console.log('login res ---', res)
        //             sessionStorage.setItem('loginInfo', JSON.stringify(res.data.data));
        //             this.$message.success('登陆成功!');

        //             this.$router.push({path: 'defaultHome'})
        //         }
        //     });
        // }


    },
    mounted() {


        console.log(
            `%c oppor-admin %c Design by elementPLus %c`,
            'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
            'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
            'background:transparent'
        );
        // this.execGetCaptcha();


    },
    methods: {

        onSubmit() {
            let form = JSON.parse(JSON.stringify(this.authForm))

            console.log(form)

            postLogin(form)
                .then(resp => {
                    console.log(resp)
                    console.log(resp.data)

                    if (resp.data.code == 200) {
                        sessionStorage.setItem('loginResp', JSON.stringify(resp.data.data));
                        ElMessage.success('登陆成功!');

                        this.$router.push({
                            path: '/layout/home',
                            query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }

                        })

                    }else{
                        ElMessage.error(resp.data.msg)
                    }

                }, err => {
                    console.log(err)
                })



        }
        // execGetCaptcha() {
        //     getCaptcha().then(res => {
        //         // console.log(res);
        //         this.captcha = res.data.data.base64Captcha;
        //         this.captchaUUID = res.data.data.uuidCaptcha;

        //     }).catch(err => {

        //     });
        // },
        // handleSubmit(e) {
        //     e.preventDefault();
        //     this.form.validateFields((err, values) => {
        //         if (!err) {
        //             // console.log('Received values of form: ', values);
        //             let reqParam = values;
        //             //前端使用md5加密密码
        //             let passMd5 = this.$md5(reqParam.pwd);
        //             let req = JSON.parse(JSON.stringify(reqParam));
        //             req.pwd = passMd5;
        //             req.uuid = this.captchaUUID;

        //             loginReq(req).then(res => {
        //                 if (res.data.code === 0) {
        //                     console.log('login res ---', res)
        //                     sessionStorage.setItem('loginInfo', JSON.stringify(res.data.data));
        //                     this.$message.success('登陆成功!');
        //                     console.log(
        //                         `%c lte-admin %c 登录系统ok %c`,
        //                         'background:blue ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
        //                         'background:red ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
        //                         'background:transparent'
        //                     );
        //                     this.$router.push({path: '/defaultHome'})
        //                     // this.$router.push({path:'/defaultHome',query:res.data.data})
        //                 } else {
        //                     if (res.data.code === 9803) {
        //                         this.form.resetFields('verifyCode');
        //                         this.execGetCaptcha();
        //                         this.$message.error('验证码校验错误,请重新输入验证码!');
        //                     } else {

        //                         this.$message.error(res.data.msg);
        //                     }
        //                 }

        //             });
        //         }
        //     });
        // },

    },
}
</script>
    
<style scoped>
.bg {
    background-image: url("/img/a2.jpg");
    height: 100%;
    width: 100%;
    position: fixed;
    background-position: center center;
}

.content {
    width: 400px;
    margin: 0 auto;
    top: 150px;
    position: relative;

}

.box-card {
    border: 1px solid transparent;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 5px 5px 0 0 rgba(255, 255, 255, 0.2);
    padding: 20px
}



/* #components-form-demo-normal-login .login-form {
            max-width: 300px;
        }
    
        #components-form-demo-normal-login .login-form-forgot {
            float: right;
        }
    
        #components-form-demo-normal-login .login-form-button {
            width: 100%;
        } */
</style>
    